require(['./config'], () => {
    require(['template', 'header'], (template) => {
      class Search {
        constructor () {
          this.renderList()
          this.renderDr()
          this.renderPage()
          this.search()
          this.sort()
        }
        renderList () {
          // 先从地址栏获取id
          // 根据id去发送请求，获得当前分类的数据来渲染列表
          const wordIndex = location.search.indexOf('start')
          const word = location.search.slice(6,wordIndex-1)
          const startIndex = location.search.indexOf('sort')
          const start = location.search.slice(wordIndex+6,startIndex-1)
          const sort = location.search.slice(-1)
          $('#searchTxt').val(decodeURI(word))
          $.get(`http://quan.lukou.com/api/search?word=${word}`, {start: start,sort: sort}, resp => {
            if (resp.code === 200) {
              let  list  = resp.data.list
              console.log({list})
              $('#goodsClassify').html(template('goodsClassifyTemplate', { list }))
            }
          })
        }
        renderDr () {
          $.get( "http://quan.lukou.com/api/tabs?sa=", resp1 => {
            if (resp1.code === 200) {
              resp1.data.list = resp1.data.list.slice(1)
              const  { list }  = resp1.data
              $('#giftList').html(template('giftListTemplate', { list }))
            }
          })
        }
        search(){
          $('#searchTxt').on('keydown',function(e){
            if(e.which == 13){
              $('#searchBtn').trigger('click')
            }
          })
          $('#searchBtn').on('click',function(){
            const word = $('#searchTxt').val()
            window.close()
            window.open(`/html/search.html?word=${word}`,'_blank')
          })
        }
        sort(){
          const wordIndex = location.search.indexOf('start')
          const word = location.search.slice(6,wordIndex-1)
          const sort = location.search.slice(-1)
          $('.sort div').eq(sort).addClass('active')
          $('.sort div').on('click',function(){
            window.open(`/html/search.html?word=${word}&start=0&sort=${$(this).index()}`,'_blank')
            window.close()
          })
        }
        renderPage(){
          // 分页
          const wordIndex = location.search.indexOf('start')
          const word = location.search.slice(6,wordIndex-1)
          const startIndex = location.search.indexOf('sort')
          const start = Number(location.search.slice(wordIndex+6,startIndex-1))
          const sort = location.search.slice(-1)
          if(start == 0){
            $('#pages').html(`
            <li><a href="/html/search.html?word=${word}&start=0&sort=${sort}" class="active" target="_blank">1</a></li>
            <li><a href="/html/search.html?word=${word}&start=40&sort=${sort}" target="_blank">2</a></li>
            <li><a href="/html/search.html?word=${word}&start=80&sort=${sort}" target="_blank">3</a></li>
            <li class="nue"><strong>...</strong></li>
            <li><a href="/html/search.html?word=${word}&start=760&sort=${sort}" target="_blank">20</a></li>
            <li><button id="nextPageBtn">下一页</button></li>
            <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
            <li><button id="turnBtn">跳转</button></li>
            `)
          }else if(start == 40){
            $('#pages').html(`
            <li><button id="lastPageBtn">上一页</button></li>
            <li><a href="/html/search.html?word=${word}&start=0&sort=${sort}" target="_blank">1</a></li>
            <li><a href="/html/search.html?word=${word}&start=40&sort=${sort}" target="_blank" class="active">2</a></li>
            <li><a href="/html/search.html?word=${word}&start=80&sort=${sort}" target="_blank">3</a></li>
            <li class="nue"><strong>...</strong></li>
            <li><a href="/html/search.html?word=${word}&start=760&sort=${sort}" target="_blank">20</a></li>
            <li><button id="nextPageBtn">下一页</button></li>
            <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
            <li><button id="turnBtn">跳转</button></li>
            `)
          }else if(start == 80){
            $('#pages').html(`
            <li><button id="lastPageBtn">上一页</button></li>
            <li><a href="/html/search.html?word=${word}&start=0&sort=${sort}" target="_blank">1</a></li>
            <li><a href="/html/search.html?word=${word}&start=40&sort=${sort}" target="_blank">2</a></li>
            <li><a href="/html/search.html?word=${word}&start=80&sort=${sort}" class="active" target="_blank">3</a></li>
            <li><a href="/html/search.html?word=${word}&start=120&sort=${sort}" target="_blank">4</a></li>
            <li class="nue"><strong>...</strong></li>
            <li><a href="/html/search.html?word=${word}&start=760&sort=${sort}" target="_blank">20</a></li>
            <li><button id="nextPageBtn">下一页</button></li>
            <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
            <li><button id="turnBtn">跳转</button></li>
            `)
          }else if(start >= 120 && start <= 640){
            $('#pages').html(`
            <li><button id="lastPageBtn">上一页</button></li>
            <li><a href="/html/search.html?word=${word}&start=0&sort=${sort}" target="_blank">1</a></li>
            <li class="nue"><strong>...</strong></li>
            <li><a href="/html/search.html?word=${word}&start=${start - 40}&sort=${sort}" target="_blank">${(start-40)/40}</a></li>
            <li><a href="/html/search.html?word=${word}&start=${start}&sort=${sort}" class="active" target="_blank">${start/40}</a></li>
            <li><a href="/html/search.html?word=${word}&start=${start + 40}&sort=${sort}" target="_blank">${(start+40)/40}</a></li>
            <li class="nue"><strong>...</strong></li>
            <li><a href="/html/search.html?word=${word}&start=760&sort=${sort}" target="_blank">20</a></li>
            <li><button id="nextPageBtn">下一页</button></li>
            <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
            <li><button id="turnBtn">跳转</button></li>
            `)
          }else if(start == 680){
            $('#pages').html(`
            <li><button id="lastPageBtn">上一页</button></li>
            <li><a href="/html/search.html?word=${word}&start=0&sort=${sort}" target="_blank">1</a></li>
            <li class="nue"><strong>...</strong></li>
            <li><a href="/html/search.html?word=${word}&start=640&sort=${sort}" target="_blank">17</a></li>
            <li><a href="/html/search.html?word=${word}&start=680&sort=${sort}" class="active" target="_blank">18</a></li>
            <li><a href="/html/search.html?word=${word}&start=720&sort=${sort}" target="_blank">19</a></li>
            <li><a href="/html/search.html?word=${word}&start=760&sort=${sort}" target="_blank">20</a></li>
            <li><button id="nextPageBtn">下一页</button></li>
            <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
            <li><button id="turnBtn">跳转</button></li>
            `)
          }else if(start == 720){
            $('#pages').html(`
            <li><button id="lastPageBtn">上一页</button></li>
            <li><a href="/html/search.html?word=${word}&start=0&sort=${sort}" target="_blank">1</a></li>
            <li class="nue"><strong>...</strong></li>
            <li><a href="/html/search.html?word=${word}&start=680&sort=${sort}" target="_blank">18</a></li>
            <li><a href="/html/search.html?word=${word}&start=720&sort=${sort}" class="active" target="_blank">19</a></li>
            <li><a href="/html/search.html?word=${word}&start=760&sort=${sort}" target="_blank">20</a></li>
            <li><button id="nextPageBtn">下一页</button></li>
            <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
            <li><button id="turnBtn">跳转</button></li>
            `)
          }else if(start == 760){
            $('#pages').html(`
            <li><button id="lastPageBtn">上一页</button></li>
            <li><a href="/html/search.html?word=${word}&start=0&sort=${sort}" target="_blank">1</a></li>
            <li class="nue"><strong>...</strong></li>
            <li><a href="/html/search.html?word=${word}&start=680&sort=${sort}" target="_blank">18</a></li>
            <li><a href="/html/search.html?word=${word}&start=720&sort=${sort}" target="_blank">19</a></li>
            <li><a href="/html/search.html?word=${word}&start=760&sort=${sort}" class="active" target="_blank">20</a></li>
            <li><button id="nextPageBtn">下一页</button></li>
            <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
            <li><button id="turnBtn">跳转</button></li>
            `)
          }
          $('#pages a,#lastPageBtn,#nextPageBtn').on('click',function(){
            window.close()
          })
          if(start != 0){
            $('html,body').animate({ scrollTop: "300" }, 1000)
          }
          // 上一页
          $('#lastPageBtn').on('click',function(){
            window.open(`/html/search.html?word=${word}&start=${start-40}&sort=${sort}`,'_blank')
          })
          // 下一页
          $('#nextPageBtn').on('click',function(){
            window.open(`/html/search.html?word=${word}&start=${start+40}&sort=${sort}`,'_blank')
          })
          // 指定页跳转
          $('#turnNum').on('keydown',function(e){
            if(e.which == 13){
              $('#turnBtn').trigger('click')
            }
          })
          $('#turnBtn').on('click',function(){
            const page = $('#turnNum').val()
            if((/^[1-9]\d*$/.test( page )) && page <= 20){
              window.close()
              window.open(`/html/search.html?word=${word}&start=${page * 40}&sort=${sort}`,'_blank')
            }else{
              alert('请输入正确的页数')
            }
          })
        }
      }
      new Search()
    })
  })